<template>
  <div class="app-container">
    <el-form
      label-width="120px"
      v-loading="loading"
      element-loading-text="数据加载中..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255,255,255, 0.8)"
      v-if="hasPerm('figure.list')"
    >
      <!--查询表单-->
      <!--  -->
      <el-form
        :inline="true"
        class="demo-form-inline"
        label-width="120px"
        v-if="hasPerm('figure.query')"
      >
        <el-form-item>
          <el-input
            v-model="figureQuery.figureName"
            placeholder="人物名"
            clearable
          />
        </el-form-item>

        <el-form-item label="湖南地级市">
          <el-select v-model="figureQuery.city" clearable placeholder="请选择">
            <el-option
              v-for="city in cities"
              :key="city.value"
              :label="city.label"
              :value="city.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-date-picker
            v-model="figureQuery.startTime"
            type="date"
            placeholder="选择开始时间"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="figureQuery.endTime"
            type="date"
            placeholder="选择截止时间"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>

        <el-button
          type="primary"
          icon="el-icon-search"
          @click="pageFigureCondition()"
          >查询</el-button
        >
        <el-button type="default" @click="resetData()">清空</el-button>
      </el-form>

      <el-collapse
        :accordion="false"
        v-model="activeNames"
        @change="handleCollapseChange"
        :key="activeKey"
      >
        <el-collapse-item
          v-for="figure in list"
          :key="figure.id"
          :title="figure.figureName"
          :name="figure.id"
        >
          <el-form-item label="年龄">
            <el-input-number
              v-model="figure.age"
              controls-position="right"
              :min="1"
              :max="120"
            ></el-input-number>
          </el-form-item>

          <el-form-item label="性别">
            <el-select v-model="figure.sex" clearable placeholder="请选择">
              <!--
            数据类型一定要和取出的json中的一致，否则没法回填
            因此，这里value使用动态绑定的值，保证其数据类型是number
          -->
              <el-option :value="1" label="男" />
              <el-option :value="2" label="女" />
            </el-select>
          </el-form-item>

          <el-form-item label="所属地级市">
            <el-input v-model="figure.city"> </el-input>
          </el-form-item>

          <el-form-item label="详细地址">
            <el-input v-model="figure.hometown"> </el-input>
          </el-form-item>

          <el-form-item label="出生时间">
            <el-input v-model="figure.birthday"> </el-input>
          </el-form-item>

          <!-- <el-form-item label="人物总结">
            <wangeditor ref="editor" :key="figureId"></wangeditor>
          </el-form-item> -->

                    <el-form-item style="margin-top: 20px" align="right">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="updateFigureInfo"
              v-if="hasPerm('figure.update')"
              >修改人物信息</el-button
            >
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="updateFigureSummary"
              v-if="hasPerm('summary.update')"
              >修改人物总结</el-button
            >
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="deleteFigure"
              v-if="hasPerm('figure.remove')"
              >删除人物</el-button
            >
          </el-form-item>

          <el-button
            v-if="figure.children.length == 0 && hasPerm('location.update')"
            @click="addLocation"
            type="success"
            plain
            >添加地点</el-button
          >
          <!-- ==========地点================== -->
          <el-collapse
            :accordion="true"
            v-model="activeNames"
            @change="handleLocationChange"
            :key="activeKey"
          >
            <el-collapse-item
              v-for="loc in figure.children"
              :key="loc.id"
              :title="loc.locationTitle"
              :name="loc.id"
            >
              <el-form-item label="发送时间">
                <el-input v-model="loc.year"> </el-input>
              </el-form-item>

              <el-form-item label="地点排序">
                <el-input v-model="loc.sort"> </el-input>
              </el-form-item>

              <el-form-item label="地点描述">
                <el-input
                  type="textarea"
                  :readonly="true"
                  :rows="6"
                  v-model="loc.description"
                >
                </el-input>
              </el-form-item>

              <el-form-item style="margin-top: 20px" align="right">
                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-edit"
                  @click="updateLocation"
                  v-if="hasPerm('location.update')"
                  >修改地点信息</el-button
                >
                <el-button
                  type="danger"
                  size="mini"
                  icon="el-icon-delete"
                  @click="deleteLocation"
                  v-if="hasPerm('location.remove')"
                  >删除地点</el-button
                >
              </el-form-item>
            </el-collapse-item>
          </el-collapse>
          <!-- ==========地点================== -->


        </el-collapse-item>
      </el-collapse>
    </el-form>

    <!-- 分页 -->
    <el-pagination
      :current-page="page"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center"
      layout="total, prev, pager, next, jumper"
      @current-change="pageFigureCondition"
    />
  </div>
</template>

<script>
import figure from "@/api/figure/figure";
import figure_location from "@/api/figure/figure_location";
import city from "@/api/option/city";
export default {
  data() {
    return {
      figureQuery: {
        //查询条件封装对象
        figureName: "",
        hometown: "", //籍贯
        locationTitle: "", //经过地
        startTime: "",
        endTime: "",
      },
      list: [], //查询后返回的数据
      page: 1, //当前页
      limit: 10, //每页记录数
      total: 0, //总记录数
      activeNames: [],
      activeKey: 0,
      figureId: "",
      locationId: "",
      loading: true,
      cities: [], //城市
    };
  },
  created() {
    this.getCities();
    this.pageFigureCondition();
  },
  methods: {
    // 获得所有的城市列表
    getCities() {
      city.getCities().then((res) => {
        const cities = res.data.cities;
        cities.forEach((item) => {
          this.cities.push({
            lable: item.id,
            value: item.city,
          });
        });
      });
    },
    pageFigureCondition(page = 1) {
      this.page = page;
      this.loading = true;
      figure
        .pageFigureCondition(this.page, this.limit, this.figureQuery)
        .then((res) => {
          var list = res.data.records;
          list.forEach(item=>{
            item.children.forEach(it=>{
              if(!it.locationTitle){
                it.locationTitle='暂无地点名'
              }
            })
          })
          this.list = list
          this.total = res.data.total;
          this.loading = false;
        });
    },
    resetData() {
      this.figureQuery = {};
      this.pageFigureCondition();
    },
    removEvent(eventId) {
      figure.deleteEvent(eventId).then((res) => {
        this.$message({
          type: "success",
          message: res.message,
        });
        this.pageFigureCondition();
      });
    },

    updateFigureInfo() {
      this.$router.push({ path: "/figure/figure/" + this.figureId });
    },
    updateFigureSummary() {
      this.$router.push({ path: "/figure/summary/" + this.figureId });
    },
    updateLocation() {
      this.$router.push({ path: "/figure/location/" + this.figureId });
    },
    // 第一层折叠版
    handleCollapseChange(value) {
      console.log('第一层',value)
      this.figureId = value[0];
    },
    // 第二层折叠版
    handleLocationChange(value) {
      // if (value.length > 2){
      //   value.splice(1,1)
      // }
      console.log('第二层'+value)
      this.locationId = value[1];
    },
    deleteLocation() {
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(this.locationId)
          figure_location.deleteFigureLocation(this.locationId).then((res) => {
            this.$message({
              type: "success",
              message: res.message,
            });
            this.pageFigureCondition();
          });
        })
        .catch(() => {});
    },
    deleteFigure() {
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          figure.deleteFigure(this.figureId).then((res) => {
            this.$message({
              type: "success",
              message: res.message,
            });
            this.pageFigureCondition();
          });
        })
        .catch(() => {});
    },
    addLocation() {
      this.$router.push({ path: "/figure/location/" + this.figureId });
    },
  },
};
</script>

<style scoped>
</style>

